<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-Vue中的指令.html</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--1.准备一个div容器-->
<div id="app">
    <p>年龄：{{age}}</p>
    <p v-text="age"></p>
    <p v-html="address"></p>
    <hr>
    <p v-once>{{age}}-{{address}}</p>
    <p v-pre>{{age}}-{{address}}</p>
    <button @click="fun1()">点我年龄+1</button>
    <button @click="fun2()">点我修改网站</button>
</div>
<script>
    <!--2.准备一个Vue对象和容器绑定-->
    const vm = new Vue({
        el: "#app",
        data: {
            age: 20,
            address: "<a href='http://www.4399.com'>学习网站</a>"
        },
        methods: {
            fun1: function () {
                this.age = this.age + 1;
            },
            fun2: function () {
                this.address ="<a href='http://www.baidu.com'>搜索网站</a>"
            }
        },
    });
</script>
</body>
</html>